<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">
	<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">

    <title>分类模块</title>

	<!-- jQuery  -->
	<script src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- bootstrap5 -->
	<link href="/static/plugins/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" media="all" />
	<script src="/static/plugins/bootstrap/5.1.3/js/bootstrap.min.js" charset="utf-8"></script>
	
	<!-- echarts -->
	<script src="/static/plugins/echarts/5.4.3/echarts.min.js"></script>

	<style>
		
		.float-right{float: right;}
		
		.card{margin: 5px;border-radius: 1.25rem; }
		.card-body{padding: 0.25rem;background-color: #DEF0FA;border-radius: 1.25rem; }
		.font_2 {padding-left: 20px; font-weight: bold; font-size: 14px;}
		.font-title{font-size: 18px; font-weight: bold;}
		.font-title-sub{font-size: 12px; color: gray; position: relative; margin-left: 20px;}
		.font-title-sub2{font-size: 12px; color: gray; text-align: right; padding-right: 20px; position:relative; height: 24px; line-height: 24px; bottom: -5px;}
		
		.font-yesterday{font-size: 16px; font-weight: bold; color: #288892;}
		.font-before{font-size: 12px;}
		.font-clock{font-weight: bold; color: black;}
		
		.font-amount{color: #000000; font-weight: 700; font-size: 24px;}
		.font-percent{color: #000000; font-weight: 500; font-size: 16px;}
		
		.hr-white{
			height: 0;
			line-height: 0;
			margin: 10px 0;
			padding: 0;
			border: none!important;
			clear: both;
			overflow: hidden;
			background: 0 0
		}
		
		.padding_10 {padding: 10px;}
		.t-left{text-align: left;}
		.t-right{text-align: right;}
		.text-center{text-align: center;}
		
		.mr-2 {padding: 10px;}
		.module-title {padding: 10px 30px;}
		.btn-selected {color: #fff; background-color: #212529; border-color: #212529;}
	</style>

	<style>
	table {border-collapse: collapse;}
	.sticky-table {
		overflow: auto;
		width: 100%;
	}
	
	.sticky-table td, .sticky-table th {
	    /* 设置td,th宽度高度 */
	    border: 1px solid #c7d8ee;
	    min-width: 50px;
	    height: 30px;
	    /*边框线，不会随着滑动变化而滑动 start*/
	    outline-color: #c7d8ee;
	    outline-style: solid;
	    outline-width: 1px;
	    /*边框线，不会随着滑动变化而滑动 start*/
	}
	.sticky-table th {
	    position: sticky;
	    top: 0; /* 首行永远固定在头部  */
	    background-color: #eaf4ff; /*设置表头背景色*/
	}
	</style>
</head>

<body>
<!-- 中间内容 -->
<div class="container-fluid">

	<div class="row">
	   
		<!-- 财务资金 -->
		<div class="col-xl-12 col-md-12 mb-4" style="margin-top: 5px;">
			<div class="row">
				<div class="col-xl-4 col-md-4 padding_10">
					<div class="card border-left-success shadow h-100">
						<div class="card-body" style="background-color: #DDF4EA;">
							<div class="row no-gutters align-items-center">
								<div class="col mr-2">
									<div class="font_2">
										<span>昨日收入</span>
									</div>
									<hr class="hr-white">
									<div style="text-align: center;">
										<span class="font-amount" id="yesterdayCount1">0</span>&nbsp;
										<span class="font-amount">CNY</span>
									</div>
									<div class="row">
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent">月度累计：</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent" id="monthAcc1">0</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: left;">
											<span class="font-percent">环比</span>
											<span class="font-percent" id="relativeByMonth1">0%</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: left;">
											<span class="font-percent">同比</span>
											<span class="font-percent" id="sameRatioByMonth1">0%</span>
										</div>
									</div>
									<div class="row">
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent">年度累计：</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent" id="yearAcc1">0</span>
										</div>
										<div class="col-xl-6 col-md-6" style="text-align: left;">
											<span class="font-percent">环比</span>
											<span class="font-percent" id="relativeByYear1">0%</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-md-4 padding_10">
					<div class="card border-left-success shadow h-100">
						<div class="card-body" style="background-color: #FBDFE3;">
							<div class="row no-gutters align-items-center">
								<div class="col mr-2">
									<div class="font_2">
										<span>昨日支出</span>
									</div>
									<hr class="hr-white">
									<div style="text-align: center;">
										<span class="font-amount" id="yesterdayCount2">0</span>&nbsp;
										<span class="font-amount">CNY</span>
									</div>
									<div class="row">
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent">月度累计：</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent" id="monthAcc2">0</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: left;">
											<span class="font-percent">环比</span>
											<span class="font-percent" id="relativeByMonth2">0%</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: left;">
											<span class="font-percent">同比</span>
											<span class="font-percent" id="sameRatioByMonth2">0%</span>
										</div>
									</div>
									<div class="row">
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent">年度累计：</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent" id="yearAcc2">0</span>
										</div>
										<div class="col-xl-6 col-md-6" style="text-align: left;">
											<span class="font-percent">环比</span>
											<span class="font-percent" id="relativeByYear2">0%</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-4 col-md-4 padding_10">
					<div class="card border-left-success shadow h-100">
						<div class="card-body" style="background-color: #DFEAFA;">
							<div class="row no-gutters align-items-center">
								<div class="col mr-2">
									<div class="font_2">
										<span>昨日结余</span>
									</div>
									<hr class="hr-white">
									<div style="text-align: center;">
										<span class="font-amount" id="yesterdayCount3">0</span>&nbsp;
										<span class="font-amount">CNY</span>
									</div>
									<div class="row">
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent">月度累计：</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent" id="monthAcc3">0</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: left;">
											<span class="font-percent">环比</span>
											<span class="font-percent" id="relativeByMonth3">0%</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: left;">
											<span class="font-percent">同比</span>
											<span class="font-percent" id="sameRatioByMonth3">0%</span>
										</div>
									</div>
									<div class="row">
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent">年度累计：</span>
										</div>
										<div class="col-xl-3 col-md-3" style="text-align: right;">
											<span class="font-percent" id="yearAcc3">0</span>
										</div>
										<div class="col-xl-6 col-md-6" style="text-align: left;">
											<span class="font-percent">环比</span>
											<span class="font-percent" id="relativeByYear3">0%</span>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<!-- 折线图 -->
		<div class="col-xl-12 col-md-12">
            <div style="display: flex;justify-content: space-between;" id="id_echarts_view">
				<div id="id_echarts" style="width: 100%;height:50vh;"></div>
			</div>
		</div>
	
		<!-- 列表-收入项目 -->
		<div class="col-xl-12 col-md-12">
	
			<div class="table-responsive-sm table-responsive-md table-responsive-lg table-responsive-xl sticky-table" style="overflow: auto; max-height: 40vh;">
				
				<table id="mytable1" class="table table-border table-bordered table-sm table-hover table-sort table-responsive table-nowrap" style="font-size: 12px; white-space: nowrap;">
					<thead>
						<tr class="table-primary" style="text-align: center;" id="tableHead1">
							<!--<th width="120">账户编码</th> -->
						</tr>
					</thead>
					<tbody id="tableBody1">
					<!--
						<tr>
							<td></td>
						</tr>
					-->
					</tbody>
				</table>
			</div>
		</div>
	
		<!-- 列表-支出项目 -->
		<div class="col-xl-12 col-md-12">
	
			<div class="table-responsive-sm table-responsive-md table-responsive-lg table-responsive-xl sticky-table" style="overflow: auto; max-height: 40vh;">
				
				<table id="mytable2" class="table table-border table-bordered table-sm table-hover table-sort table-responsive table-nowrap" style="font-size: 12px; white-space: nowrap;">
					<thead>
						<tr class="table-primary" style="text-align: center;" id="tableHead2">
							<!-- <th width="120"></th>-->
						</tr>
					</thead>
					<tbody id="tableBody2">
					<!--
						<tr>
							<td></td>
						</tr>
					-->
					</tbody>
				</table>
			</div>
		</div>
		
	</div>
</div>

<script th:inline="javascript">
</script>
<script src="/static/js/bi/business/category.js"></script>
</body>
</html>